<template>
    <div class="overlay" @click="closeModal" v-if="isVisible">
     <div class="dialog">
<img :src="qrcode.src" class="w-[430px] h-[430px]" alt="">
     </div>
    </div>
</template>
<script setup>
import { defineProps, defineEmits, computed } from 'vue';
import qrcode from '@assets/qrcode.png';
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['update:modelValue']);

const closeModal = () => {
  emit('update:modelValue', false);
};

const isVisible = computed(() => props.modelValue);

</script>
<style lang="scss">

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    overflow: auto;
}
.dialog{
    margin: 15vh auto 50px;
    width: 430px;
}
</style>